<template>
    <div class="container">
        <van-nav-bar title="设备详情" left-arrow @click-left="onClickLeft" />
        <div class="header">
            <div class="top">
                <p class="title">{{ DeviceDetails.address }}</p>
                <p :style="{ color: DeviceDetails.isStatus == 0 ? '#FF0000' : '#00B74F' }">{{ DeviceDetails.isStatus ==
                    0 ?
                    '离线' : '在线' }}</p>
            </div>
            <div class="bottom">
                <div class="news">
                    <p>设备编号</p>
                    <p>{{ DeviceDetails.code }}</p>
                </div>
                <div class="news">
                    <p>实时重量</p>
                    <p>{{ DeviceDetails.nowWeight }}kg</p>
                </div>
                <div class="news">
                    <p>设备状态</p>
                    <p>{{ DeviceDetails.storageStatus == 0 ? '正常' : '满仓' }}</p>
                </div>
            </div>
        </div>
        <div class="middle" v-if="RemovalDetail">
            <div class="top">
                <p class="title"><span>清运信息</span></p>
                <p style="font-weight: 400;color:#005DFF;" @click="goLookMore">查看更多</p>
            </div>
            <div class="bottom">
                <div class="item">
                    <p>清运人员：</p>
                    <!-- 有字段但是是Null -->
                    <p>{{ RemovalDetail.realname }}</p>
                </div>
                <div class="item">
                    <p>上次清运时间：</p>
                    <p>{{ RemovalDetail.removalTime }}</p>
                </div>
            </div>
        </div>
        <div class="tip" v-else>暂无清运信息</div>
        <div class="footer">
            <button @click="stateCorrect">状态修正</button>
            <button @click="goReport">上报异常</button>
            <button @click="RestartDevice">重启设备</button>
        </div>
        <!-- 状态修正和设备重启的弹框 -->
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <!-- 状态修正 -->
                <div class="block" v-if="flag == 1">
                    <p>请设置设备当前状态</p>
                    <div class="operate">
                        <button v-for="(item, index) in correctBtnOne" :class="flagsa === index ? 'aaaa' : ''"
                            :key="index" @click="goUpdate(item, index)">{{
                                item.title
                            }}</button>
                        <button v-for="(item, index) in correctBtnTwo" :class="flagsb === index ? 'aaaa' : ''"
                            :key="index" @click="goUpdate(item, index)">{{
                                item.title
                            }}</button>
                    </div>
                    <button class="aa" @click="updateDeviceStatueFun1">确定</button>
                    <img src="../../assets/DeviceManage/01.png" @click="show = false">
                </div>
                <!-- 重启设备 -->
                <div class="block" v-if="flag == 2">
                    <p>是否重启当前设备</p>
                    <div class="operate" style="gap:1em;">
                        <button v-for="(item, index) in restartBtn" :key="index"
                            @click="item.title == '是' ? goRestart() : show = false">{{ item.title }}</button>
                    </div>
                    <img src="../../assets/DeviceManage/01.png" @click="show = false">
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import {
    goLookDeviceDetails,
    getRemovalInfo,
    updateDeviceStatue,
    goRestartDevice,
} from '@/api/DeviceManage';
import { showToast } from 'vant';
const route = useRoute()
const router = useRouter()
const flagsa = ref('')
const flagsb = ref('')
const onClickLeft = () => {//点击返回
    router.push({ path: '/DeviceManage' })
}

let DeviceDetails = ref({})
const goLookDeviceDetailsFun = async () => { //设备详情
    let goLookDeviceDetailsData = {
        pageIndex: 1,
        pageSize: 1,
        id: route.query.id
    }
    try {
        const res = await goLookDeviceDetails(goLookDeviceDetailsData)
        if (res.data.code == 200) {
            DeviceDetails.value = res.data.dataset.list
            // console.log(DeviceDetails.value);
        }
    } catch (error) { }
}

let RemovalDetail = ref({})
const getRemovalInfoFun = async () => { //清运详情
    let getRemovalInfoFunData = {
        pageIndex: 1,
        pageSize: 1,
        id: route.query.id
    }
    try {
        const res = await getRemovalInfo(getRemovalInfoFunData)
        if (res.data.code == 200) {
            RemovalDetail.value = res.data.dataset.list
            // console.log(RemovalDetail.value);
        }
    } catch (error) { }
}

let show = ref(false)//模态框
let flag = ref(1)//1:状态修正 2:设备重启
let correctBtnOne = ref([//状态修正的按钮  正常故障
    { title: '正常', value: 0 },
    { title: '故障', value: 1 },
])
let correctBtnTwo = ref([//状态修正的按钮  满仓未满仓
    { title: '未满仓', value: 0 },
    { title: '满仓', value: 1 },
])
let restartBtn = ref([//重启设备的按钮
    { title: '是' },
    { title: '否' },
])
let status = ref('')//设备状态
let storageStatus = ref('')//仓储状态
const stateCorrect = () => {//点击状态修正
    show.value = true
    flag.value = 1
}
const RestartDevice = () => { //点击重启设备
    show.value = true
    flag.value = 2
}
const goUpdate = (item, i) => { //进行状态修正
    // console.log(item, i);
    const { title, value } = item
    // console.log(title, value);
    if (title == '正常' || title == '故障') {
        if (flagsa.value !== i) {
            flagsa.value = i
            status.value = value
            console.log();

        } else {
            flagsa.value = ''
            status.value = ''
        }


    }
    if (title == '满仓' || title == '未满仓') {
        if (flagsb.value !== i) {
            flagsb.value = i
            storageStatus.value = value
        } else {
            flagsb.value = ''
            storageStatus.value = ''
        }


    }
    console.log(storageStatus.value, status.value, flagsa.value, flagsb.value);

    // 
    // 
}
const updateDeviceStatueFun = async (x, y) => { //调更新设备接口
    let updateDeviceStatueData = {
        pageIndex: 1,
        pageSize: 1,
        id: Number(route.query.id),
    }
    console.log(x, y, '---------------------');

    if (x !== '') {
        updateDeviceStatueData.status = x
        console.log(1);

    }
    if (y !== '') {
        updateDeviceStatueData.storageStatus = y
        console.log(1);

    }
    // console.log(updateDeviceStatueData);
    try {
        const res = await updateDeviceStatue(updateDeviceStatueData)
        console.log(res);
        if (res.data.code == 200) {
            showToast('修正成功')
            show.value = false
        }
    } catch (error) { }
}
const updateDeviceStatueFun1 = () => {
    flagsa.value = ref('')
    flagsb.value = ref('')
    show.value = false
    updateDeviceStatueFun(status.value, storageStatus.value)
}

const goRestart = async () => { //点击是，调重启设备接口
    let goRestartData = {
        pageIndex: 1,
        pageSize: 1,
        id: route.query.id
    }
    try {
        const res = await goRestartDevice(goRestartData)
        console.log(res);
        if (res.data.code == 200) {
            showToast('重启成功')
            show.value = false
        }
    } catch (error) { }
}

const goLookMore = () => { //点击查看更多,跳清运记录
    router.push({
        path: '/ClearReport',
        query: {
            id: route.query.id
        }
    })
}

const goReport = () => { //点击上报异常
    router.push({
        path: '/ReportAnomalies',
        query: {
            equipmentId: route.query.id
        }
    })
}

onMounted(() => {
    goLookDeviceDetailsFun()
    getRemovalInfoFun()
})
</script>

<style lang="less" scoped>
.container {
    height: 100vh;
    background-color: #F9F9F9;

    :deep(.van-nav-bar .van-icon) {
        color: #000
    }

    .header {
        width: 100vw;
        font-size: 4em;
        box-sizing: border-box;
        padding: 1.5em 1em;
        background-color: #fff;

        .top {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding-bottom: 1.3em;
            border-bottom: 1px dashed #ccc;

            .title {
                font-weight: bold;
                font-size: 1.1em;
            }
        }

        .bottom {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding-top: 1.3em;
            gap: 1em;

            .news {
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .middle {
        width: 90vw;
        background-color: #fff;
        font-size: 4em;
        margin: 0 auto;
        margin-top: 1.5em;
        box-shadow: 1px 1px 10px #e2e2e2;
        border-radius: 1em;

        .top {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;

            .title,
            p {
                box-sizing: border-box;
                padding: 0.4em 1em 0.6em 1em;
                font-weight: bold;

                span {
                    border-left: 2px solid #005DFF;
                    box-sizing: border-box;
                    padding-left: 0.4em
                }
            }
        }

        .bottom {
            box-sizing: border-box;
            padding: 0.4em 1em 0.6em 1em;
            display: flex;
            flex-direction: column;
            gap: 1em;

            .item {
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .tip {
        font-size: 4em;
        text-align: center;
        margin-top: 2em;
    }

    .footer {
        width: 100vw;
        font-size: 4em;
        display: flex;
        justify-content: center;
        margin-top: 10em;
        gap: 1em;

        button {
            background: none;
            border: 1px solid #2488ED;
            box-sizing: border-box;
            padding: 0.4em 1.5em;
            border-radius: 1.1em;
            color: #2488ED;
            font-weight: bold;
        }
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100vw;
        font-size: 4em;

        .block {
            width: 90vw;
            background-color: #fff;
            box-sizing: border-box;
            padding: 1.5em 1em;
            border-radius: 1em;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                font-weight: bold;
                text-align: center;
                font-size: 1.2em;
                margin-bottom: 0.6em;
            }

            .operate {
                display: flex;
                justify-content: center;
                gap: 0.5em;

                button {
                    background: none;
                    border: 1px solid #2488ED;
                    box-sizing: border-box;
                    padding: 0.4em 0.8em;
                    border-radius: 1.1em;
                    color: #2488ED;
                    font-weight: bold;
                }

                .aaaa {
                    border: 1px solid #f50909;
                    box-sizing: border-box;
                    padding: 0.4em 0.8em;
                    border-radius: 1.1em;
                    color: #05f893;
                    font-weight: bold;
                }
            }

            .aa {
                background: #2488ED;
                border: 1px solid #2488ED;
                box-sizing: border-box;
                padding: 0.8em 4em;
                border-radius: 1.1em;
                color: #fff;
                font-weight: bold;
                margin-top: 2em;
            }

            img {
                width: 2.5em;
                position: absolute;
                bottom: -4em;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    .aaaaa {
        background-color: #005DFF;
    }
}
</style>